<template>
  <a-modal
    :title="title"
    :visible="visible"
    width="360px"
    cancelText="取消"
    okText="确定"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <CommonForm ref="commonFormRef" :formData="formData" :formJson="formJson" />
  </a-modal>
</template>

<script>
import { getRoleMap } from '@/api/system/role'
import { addUser, editUserById } from '@/api/system/user'
import { uploadImg } from '@/views/dashboard/EditDashboard/LowCode/lib/upload'
import CommonForm from '@/components/CommonForm'
import { defaultStoreData } from '@/views/dashboard/EditDashboard/LowCode/lib/const'
import { foreachTree } from '@/utils/util'

const formData = {
  userName: '',
  avatar: '',
  password: 1,
  roleIds: [],
  email: '',
}
export default {
  components: {
    CommonForm,
  },
  data() {
    return {
      visible: false,
      formData: {
        ...formData,
      },
      parentData: [],
      title: '新增',
      type: 'add',
      roleOption: [],
    }
  },
  computed: {
    formJson() {
      const { type, roleOption, beforeUpload } = this
      const disabled = type === 'details'
      return [
        {
          type: 'input',
          label: '用户名',
          fieldName: 'userName',
          extraConfig: {
            className: 'row',
            disabled,
          },
          rules: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
          dataType: String,
        },
        {
          type: 'tree-select',
          label: '角色',
          fieldName: 'roleIds',
          extraConfig: {
            className: 'row',
            treeData: roleOption,
            multiple: true,
            replaceFields: {
              children: 'children',
              title: 'name',
              key: 'id',
              value: 'id',
            },
            disabled,
          },
          rules: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
          dataType: Number,
        },
        {
          type: 'upload',
          rules: [{ required: true, message: '用户头像不能为空', trigger: 'blur' }],
          label: '背景图片',
          fieldName: 'avatar',
          initialValue: '',
          beforeUpload,
          extraConfig: {
            className: 'value',
            showUploadList: false,
            disabled,
          },
          dataType: String,
        },
        {
          type: 'input',
          label: '简介',
          fieldName: 'profile',
          extraConfig: {
            className: 'row',
            disabled,
          },
          dataType: String,
        },
      ]
    },
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleOk() {
      if (this.type === 'add') {
      } else if (this.type === 'details') {
        this.handleCancel()
        return false
      }
      const callBack = this.type === 'add' ? addUser : editUserById
      console.log(this.$refs.commonFormRef)
      this.$refs.commonFormRef.form.validate((valid) => {
        if (valid) {
          callBack({
            ...this.formData,
            nickName: this.formData.userName,
            parentId: this.formData.parentId ? this.formData.parentId : 0,
            roleIds: this.formData.roleIds.join(','),
          }).then(() => {
            this.handleCancel()
            this.$message.success(`${this.title}成功`)
          })
        }
      })
    },
    handleCancel() {
      this.visible = false
      this.formData = {
        ...formData,
      }
      this.$emit('update')
    },
    show(type = 'add', val = {}) {
      this.type = type
      val.parentId = val.parentId === 0 ? undefined : val.parentId
      switch (type) {
        case 'add': {
          this.title = '新增'
          this.formData = {
            ...formData,
          }
          break
        }
        case 'edit': {
          this.title = '编辑'
          console.log(val)
          this.formData = {
            ...val,
            profile: val.info.profile,
            avatar: val.info.avatar,
            userName: val.info.nickName,
            roleIds: val.roleIds.split(','),
          }
          break
        }
        case 'details': {
          this.title = '详情'
          this.formData = {
            ...val,
            profile: val.info.profile,
            avatar: val.info.avatar,
            userName: val.info.nickName,
            roleIds: val.roleIds.split(','),
          }
          break
        }
        default: {
          this.title = '新增'
          this.type = 'add'
        }
      }

      this.visible = true
      console.log(this.formData)
    },
    handleIconClick() {
      this.isIconShow = true
    },
    handleSelectIcon(node) {
      this.formData.icon = node.type
      this.isIconShow = false
    },
    getData() {
      getRoleMap().then((data) => {
        this.roleOption = data
      })
    },
    beforeUpload(file) {
      uploadImg(file, 'avatar', this.formData).then((img) => {
        this.formData.info.avatar = img
        this.formData.avatar = img
      })
      return false
    },
  },
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
